<template>
  <div>
    <!-- 现场巡查问题详情对话框 -->
    <jy-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-divider content-position="left">质量安全问题</el-divider>
      <el-descriptions border title="" :column="1" labelClassName="descriptions-label">
        <el-descriptions-item label="项目名称：">{{ form.projectName }}</el-descriptions-item>
        <el-descriptions-item label="标段名称：">{{ form.bdName }}</el-descriptions-item>
        <el-descriptions-item label="里程桩号：">{{ form.lczh }}</el-descriptions-item>
        <el-descriptions-item label="问题标题：">{{ form.wtbt }}</el-descriptions-item>
        <el-descriptions-item label="存在问题：">{{ form.czwt }}</el-descriptions-item>
        <el-descriptions-item label="指派人员：">
          <el-tag v-for="(item, index) in form.assignPeopleList" :key="index">
            {{ item.nickName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="巡查时间：">{{ form.xcsj }}</el-descriptions-item>
        <el-descriptions-item label="巡查上报人：">{{ form.xcsbrName }}</el-descriptions-item>
        <el-descriptions-item label="整改要求：">{{ form.zgyq }}</el-descriptions-item>
        <el-descriptions-item label="整改时限：">{{ form.zgsx }}</el-descriptions-item>
        <el-descriptions-item label="附件：">
          <fileUpload v-model="form.fileId" :disabled="true" />
        </el-descriptions-item>
      </el-descriptions>
      <div v-for="(item, index) in recordingList" :key="index">
        <el-divider content-position="left">{{ getTypeName(item) }}记录</el-divider>
        <el-descriptions border title="" :column="1" labelClassName="descriptions-label">
          <el-descriptions-item :label="getTypeName(item) + '时间：'">{{ item.date }}</el-descriptions-item>
          <el-descriptions-item :label="getTypeName(item) + '人：'">{{ item.personnelName }}</el-descriptions-item>
          <el-descriptions-item :label="getTypeName(item) + '内容：'">{{ item.content }}</el-descriptions-item>
          <el-descriptions-item v-if="item.type == 2" label="复查结果：">{{ item.outcome }}</el-descriptions-item>
          <el-descriptions-item label="附件：">
            <fileUpload v-model="item.fileId" :disabled="true" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </jy-dialog>
  </div>
</template>

<script>
import { getInspectionIssue, } from "@/api/scene/inspectionIssue";
import { mapGetters } from "vuex";
import { listInspectionIssueRecording } from "@/api/scene/inspectionIssueRecording";

export default {
  name: "InspectionIssueView",
  dicts: ['scene_inspection'],
  components: {
  },
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 现场巡查问题表格数据
      dataList: [],
      // 弹出层标题
      title: "现场巡查详情",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      recordingList: []
    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["sysProjectId", "sysProjectList", "nickName", "name", "userId"])
  },
  methods: {
    init (id) {
      this.reset();
      this.form.id = id;
      this.getInfo();
      this.getRecordingList();
      this.open = true;
    },
    getInfo () {
      this.loading = true;
      getInspectionIssue(this.form.id).then(response => {
        this.loading = false;
        this.form = response.data;
        if (this.form.fileId) {
          this.form.fileIdOld = this.form.fileId.split(',');
        }
      });
    },
    // 获取整改记录列表
    getRecordingList () {
      const queryParams = {
        inspectionId: this.form.id
      };
      listInspectionIssueRecording(queryParams).then(response => {
        this.recordingList = response.data;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        id: undefined,
        projectId: this.sysProjectId,
        bdId: undefined,
        lczh: undefined,
        wtbt: undefined,
        czwt: undefined,
        xcsj: undefined,
        xcsbr: this.nickName,
        zgyq: undefined,
        zgsx: undefined,
        fileId: undefined,
        fileIds: [],
        fileIdOld: [],
        copyUserList: []
      };
      this.resetForm("form");
      this.recordingList = [];
    },
    getTypeName (item) {
      return item.type == 1 ? '整改' : '复查';
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag {
  margin-right: 10px;
}


::v-deep {
  .descriptions-label {
    width: 150px;
    text-align: right !important;
  }
}
</style>
